<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游数据看板-Beta版</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-olOxEXxDwd20BlATUibkEnjPN3sVq2YWmYOnsMYutq7X8YcUdD6y/1I+f+ZOq/47" crossorigin="anonymous"> -->

    <!-- <script src="./static/js/index.js"></script> -->
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
    <link rel="stylesheet" href="./static/css/style.css">
</head>

<body>
    <div class="top" style="height: 80px;"></div>

    <!-- 导航 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow p-3 mb-5 bg-white rounded">
        <a data-toggle="tooltip" data-placement="right" title="本站数据来源均来自 携程网" class="navbar-brand"
            href="#">旅游数据看板-Beta版</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a data-toggle="tooltip" data-placement="right" title="首页" class="nav-link" href="#">Home <span
                            class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a data-toggle="popover" title="提示" data-content="本页面有友好的使用提示，若不熟悉如何使用，请在对应模块将鼠标悬停在对应组件出，将会给出具体提示。"
                        id="" class="nav-link" href="#">Tip</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                        data-toggle="dropdown" aria-expanded="false">
                        Menu
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#line_color_with_js_func">景点 评分-价格 折线关系图</a>
                        <a class="dropdown-item" href="#basic_wordcloud">出游套餐 好评-高频关键词统计</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#map">全国旅游热度分析地图</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a data-toggle="tooltip" data-placement="right"
                        title="关于作者：Design by cold Special thanks to bard,帅帅"
                        class="nav-link" href="#" tabindex="-1" aria-disabled="true">About</a>
                </li>
            </ul>
            <form action="http://www.baidu.com/baidu" target="_blank" class="form-inline my-2 my-lg-0">
                <input name=tn type=hidden value=baidu>

                <a href="http://www.baidu.com/" style="padding-right: 20px;">
                    <img src="http://img.baidu.com/search/img/baidulogo_clarity_80_29.gif" alt="Baidu"></a>
                <input data-toggle="tooltip" data-placement="left" title="点击搜索，以了解更多内容" name="word"
                    class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" value="百度搜索" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <!-- 百度搜索 -->
    <!-- <div id="container">
        <form action="http://www.baidu.com/baidu" target="_blank">
        <div align="center">
        <input name=tn type=hidden value=baidu>
        <a href="http://www.baidu.com/">
        <img src="http://img.baidu.com/search/img/baidulogo_clarity_80_29.gif" alt="Baidu" align="bottom" border="0"></a>
        <input type=text name=word size=30>
        <input type="submit" value="百度搜索"></div>
        </form>
        </div> -->

    <!-- 进度条 -->
    <div class="progress fixed-bottom">
        <div id="progress_with_control" class="progress-bar progress-bar-striped progress-bar-animated"
            role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
    </div>




    <!-- map -->
    <div class="flex ">

        <div id="map" class="chart-container shadow-lg p-3 mb-5 bg-white rounded" style="width:900px; height:500px;">
        </div>
        <script src="./static/js/map_basic_data_example.js"> </script>
    </div>



    <!-- 隐藏-1 -->
    <p>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1"
            aria-expanded="false" aria-controls="collapseExample">
            景点 评分-价格 折线关系图
        </button>

    </p>


    <div class="flex">
        <div class="collapse" id="collapseExample1">
            <div class="card card-body">

                <!--  下拉框 v3-->
                <div class="container shadow p-3 mb-5 bg-white rounded">
                    <div class="">
                        <h2 style="font-family:fangsong;">横渡致远，乡游至美</h2>
                        <hr>
                        <!-- Button trigger modal -->
                        <button type="button" id="viewport_brief_introduction" class="btn btn-primary float-right"
                            data-toggle="modal" data-target="#exampleModal">
                            景点简介
                        </button>
                        <!-- <button id="viewport_brief_introduction" type="button" class="btn btn-lg btn-danger float-right"
                            data-toggle="popover" title="西双版纳66"
                            data-content="西双版纳傣族自治州，是云南省的8个自治州之一，首府景洪市。西双版纳位于北纬21°10′—22°40′，东经99°55′—101°50′，处于北回归线以南的热带北部边沿，面积有19124.5平方千米，东北、西北与普洱市接壤，东南与老挝相连，西南与缅甸接壤，国境线长966.3公里，一江连六国，拥有4个国家级口岸。">景点简介</button> -->

                        <select data-toggle="tooltip" data-placement="bottom" title="请在这里选择您需要查询的34个省份(含直辖市、自治区)"
                            name="province" id="province" onchange="queryViewport();">
                            <option value="-1">--请选择省(直辖市)--</option>
                        </select>
                        <!-- <select name="city" id="city" onchange="queryViewport();">
                            <option value="-1">--请选择城市--</option>
                        </select> -->
                        <select onchange="viewportAnalyse();" data-toggle="tooltip" data-placement="right"
                            title="请在这里选择您的出游目的地" name="viewport" id="viewport">
                            <option value="-1">--请选择景点--</option>
                            
                        </select>
                    </div>

                </div>


                <!-- //景点分析---line_color_with_js_func -->
                <div id="line_color_with_js_func"></div>
                <!-- <div id="line_color_with_js_func" class="chart-container shadow-lg p-3 mb-5 bg-white rounded"
                style="width:900px; height:500px;">
            </div> -->
                <iframe id="iframe_line_color_with_js_func" src="" frameborder="0"
                    style=" width:1125px; height:625px;"></iframe>


            </div>
        </div>
    </div>
    <!-- 隐藏-2 -->
    <p>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2"
            aria-expanded="false" aria-controls="collapseExample">
            套餐 好评-高频关键词统计
        </button>
    </p>
    <div class="flex">
        <div class="collapse" id="collapseExample2">

            <div class="card card-body">
                <div class="input-group">
                    <select data-toggle="tooltip" data-placement="top"
                        title="请在这里选择评分下限，例如：选择4.5，那么将为您提供 好评在 4.5-5.0 范围内游客最关心的关键词" class="custom-select"
                        id="inputGroupSelect04" aria-label="Example select with button addon">
                        <option selected value="-1">Choose...</option>
                        <option value="4.1">4.1</option>
                        <option value="4.2">4.2</option>
                        <option value="4.3">4.3</option>
                        <option value="4.4">4.4</option>
                        <option value="4.5">4.5</option>
                        <option value="4.6">4.6</option>
                        <option value="4.7">4.7</option>
                        <option value="4.8">4.8</option>
                        <option value="4.9">4.9</option>
                        <option value="5.0">5.0</option>


                    </select>
                    <div class="input-group-append">
                        <button data-toggle="tooltip" data-placement="right" title="评分查询下限，点击此按钮查询"
                            class="btn btn-outline-secondary" type="button" id="inputGroupSelect04Button">查询</button>
                    </div>
                </div>
                <!-- 套餐---词云 -->
                <div id="basic_wordcloud" class="chart-container shadow-lg p-3 mb-5 bg-white rounded"
                    style="width:900px; height:500px;">
                </div>
                <script src="./static/js/basic_wordcloud_data_example.js"></script>

            </div>

        </div>
    </div>



    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content shadow p-3 mb-5 bg-white rounded">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">当下热门景点</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body shadow p-3 mb-5 bg-white rounded">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
                </div>
            </div>
        </div>
    </div>



    <!-- js -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>
    <script src="./static/js/index.js"></script>
    <script src="./static/js/style.js"></script>
</body>


</html>